<template>
  <div>
    <van-nav-bar
      title="订单列表"
      left-arrow
      fixed
      placeholder
      @click-left="goBack"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs
      sticky
      offset-top="46px"
      v-model:active="orderActive"
      border
      @click="tabsChange"
    >
      <van-tab :title="item" v-for="(item, index) in tabsTitle" :key="index">
        <van-pull-refresh v-model="orderRefreshing" @refresh="orderRefresh">
          <van-list
            v-model:loading="orderLoading"
            :finished="orderFinished"
            finished-text="没有更多了"
            @load="orderLoad"
          >
            <div
              class="order-code"
              v-for="item in orderList"
              :key="item.id"
              @click="goOrderDetail(item.id)"
            >
              <div class="order-code-box">
                <p>订单号: {{ item.order_no }}</p>
                <p>创建时间: {{ item.updated_at }}</p>
              </div>
              <div
                :class="index === 0 ? '' : 'order-goods'"
                v-for="(item1, index) in item.orderDetails.data"
                :key="item1.id"
              >
                <van-card
                  :num="item1.num"
                  :price="item1.price"
                  desc="全场包邮"
                  :title="item1.goods.title"
                  :thumb="item1.goods.cover_url"
                />
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <back-top></back-top>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { getOrderList } from '../../network/order'
import { Toast } from 'vant'
import BackTop from '../../components/common/BackTop.vue'
export default {
  components: {
    BackTop
  },
  setup () {
    const router = useRouter()
    const state = reactive({
      tabsTitle: ['全部', '待付款', '已支付', '发货', '交易完成', '已过期'],
      queryInfo: {
        page: 1,
        title: '',
        status: 0,
        include: 'orderDetails.goods'
      },
      orderActive: 0,
      orderList: [],
      orderLoading: false,
      orderFinished: false,
      orderRefreshing: false
    })
    const init = () => {
      Toast.loading({ message: '加载中...', forbidClick: true })
      state.orderLoading = true
      getOrderList(state.queryInfo).then(res => {
        console.log(res)
        if (state.queryInfo.page > 1) {
          state.orderList.push(...res.data)
          state.queryInfo.page++
        } else {
          state.orderList = res.data
          state.queryInfo.page++
        }
        state.orderLoading = false
        state.orderRefreshing = false
        if (res.data.length === 0) {
          state.orderFinished = true
        }
        Toast.clear()
      })
    }
    onMounted(() => {
      init()
    })
    const tabsChange = (index) => {
      state.queryInfo.status = index
      state.queryInfo.page = 1
      init()
    }
    const goOrderDetail = (id) => {
      router.push({ path: '/orderdetail', query: { id } })
    }
    const orderLoad = () => {
      init()
    }
    const orderRefresh = () => {
      state.queryInfo.page = 1
      init()
    }
    const goBack = () => {
      router.go(-1)
    }
    return {
      ...toRefs(state),
      goBack,
      tabsChange,
      orderLoad,
      orderRefresh,
      goOrderDetail
    }
  }
}
</script>
<style scoped lang="less">
.order-code {
  padding: 30px 20px 0;
  text-align: left;
  .order-code-box {
    background-color: #f9f9f9;
    padding: 15px;
    p {
      line-height: 25px;
    }
  }
}
.van-card {
  background-color: #fff;
}
.order-goods {
  border-top: 8px solid #f9f9f9;
}
</style>
